
//鼠标移入，弹出登录框
$(".ibar_mp_center li").eq(0).hover(function(){
    $(".ibar_mp_center .login_box").css("display","block") 
   },function(){
       $(".ibar_mp_center .login_box").css("display","none") 
   })
   //登陆区
   $(".ibar_mp_center .login_box .close").click(function(event){
       // event.stopPropagation()
       $(".ibar_mp_center .login_box").css("display","none") 
   })
//打开页面弹出右边导航栏
$(function(){
    $(".fixaside").css("right","0")
})
//点击弹出购物车
$(".ibar_mp_center li .tw").click(function(event){
    event.stopPropagation()
    $(".ibar_mp_carlist").animate({
        left:-287,
    })
    $(this).addClass("active")
})
//点击页面关闭购物车，取消样式
$(document).click(function(){
    $(".ibar_mp_carlist").animate({
        left:40,
    })
    $(".ibar_mp_center li .tw").removeClass("active") 
})
//利用冒泡抵消点击弹出的购物车关闭现象
$(".ibar_mp_carlist").click(function(event){
    event.stopPropagation()
    $(this).animate({
        left:-287,
    })
    $(".ibar_mp_center li .tw").addClass("active")
    console.log("弹出")
})
//点击叉号关闭
$(".ibar_mp_carlist h2 .close").click(function(event){
    event.stopPropagation()
    
    $(".ibar_mp_carlist").animate({
        left:40,
    })
    $(".ibar_mp_center li .tw").removeClass("active") 
})                                 
//当页面滚动到一定距离，回到顶部按钮出现
window.onscroll=function(){
    // console.log($(window).scrollTop())
  if($(window).scrollTop()>300){
      $(".ibar_mp_foot li").eq(2).css("visibility","visible")
  }else{
    $(".ibar_mp_foot li").eq(2).css("visibility","hidden")
  }
}
$(".ibar_mp_foot li").eq(2).click(function(){
    $(window).scrollTop(0)
})



//物品详情显示
var obj = new URLSearchParams(location.search)
var pid = obj.get("pid") 
product_load()
async function product_load(){
  var {data} = await axios.get(detailAPI,{
       params:{
           id:pid,
       }
   })
   console.log(data.data)
     $(" .w .container").html(`
     <div class="l">
     <div class="simg_t">
         <img src=${data.data.pimg} alt="">
         <div class="mask">

         </div>
     </div>
     <div class="simg_b">
         <img src=${data.data.pimg} alt="">
     </div>
     <div class="bimg">
         <img src=${data.data.pimg} alt="">
     </div>
 </div>
 <div class="r">
  <h2>描述:${data.data.pdesc}</h2>
  <p class="price"><span>￥</span>${data.data.pprice}</p>
  <p class="num">数量<span><input type="text" value="1" onchange="change()"><a href="javascript:;" class="add" onclick="add()"></a><a href="javascript:;" class="sub" onclick="sub()"></a></span> </p>
 <p class="add_cart" onclick="addcart()"><span></span> 加入购物车</p>
 </div>
     `)
     var h1 = parseInt($(".l .simg_t").css("height"))
        var h2 = parseInt($(".l .bimg").css("height")) - 10;
        var h3 = parseInt($(".simg_t .mask").css("height"))
        var h4 = h1 * h2 / h3;
        var rate = h4 / h1;
        var aa = document.querySelector(".l")
        $(".details .container .bimg img").css("height", h4)
        $(".l .simg_t").mouseenter(function () {
            $(".simg_t .mask").stop().fadeIn()
            $(".l .bimg").stop().fadeIn(500)
            $(".l .simg_t").mousemove(function (event) {
                // console.log(this.getBoundingClientRect().top)
                var x1 = event.pageX;
                var y1 = event.pageY;
                // var x1 = event.clientX;
                // var y1 = event.clientY;
                // console.log(aa.offsetTop)
                // console.log(aa.offsetLeft)
                // console.log(rate)
                var left = x1 - aa.offsetLeft - 76;
                var top = y1 - aa.offsetTop - 101;
                if (left < 0) {
                    left = 0;
                }
                if (top < 0) {
                    top = 0;
                }
                if (left > 223) {
                    left = 223;
                }
                if (top > 298) {
                    top = 298;
                }
                $(".simg_t .mask").css({
                    left: left,
                    top: top,
                })
                $(".l .bimg img ").css({
                    left: -rate * left,
                    top: -rate * top,
                })
                // console.log("left" + $(".simg_t .mask").css("left"))
                // console.log("top" + $(".simg_t .mask").css("top"))
            })
        })
        $(".l .simg_t").mouseleave(function () {
            $(".simg_t .mask").stop().fadeOut()
            $(".l .bimg").stop().fadeOut(500)
        })
}

//点击加减切换改变数量
function add(){
    // console.log( $(".container .r .num input").val())
    if(~~$(".container .r .num input").val()>=20){

    }else{
        $(".container .r .num input").val( ~~$(".container .r .num input").val()+1)
    } 
}
function sub(){
    if( ~~$(".container .r .num input").val()<=1){

    }else{
        $(".container .r .num input").val( ~~$(".container .r .num input").val()-1)
    }
    
}
function change(){
    if(~~$(".container .r .num input").val()>=20){
                $(".container .r .num input").val(20)
            }else if(~~$(".container .r .num input").val()<=1){
                $(".container .r .num input").val(1)
            }
}
//点击加入该购物车按钮,加入购物车

async function addcart(){
    if(localStorage.getItem("uid")){
        var {data} = await axios.get(addcarAPI,{
            params:{
                uid:localStorage.getItem("uid"),
                pid:pid,
                pnum:$(".container .r .num input").val()
            }
        })
        alert(data.msg)
        updataCart()
    }else{
        alert("请先登录")
    }

}
//同步更新购物车商品数量与内容
productLoad()
async function productLoad(){
    if(localStorage.getItem("uid")){
        var {data} =  await axios.get(productAPI,{
            params:{
                uid:localStorage.getItem("uid"),
            }
        })
    }else{
        var {data} =  await axios.get(allproductlistAPI)
    }
 
 console.log(data)
     var html=""
    data.data.forEach(function(v,i){
        html=html+`
        <li>
        <div class="imgbox">
            <a href="detail.html?pid=${v.pid}">
                <img src=${v.pimg} alt="">
            </a>
        </div>
        <div class="join">
            <a href="javascript:;">加入购物车</a>
            <ul class="details">
                <li>${v.pname}*3盒</li>
                <li>${v.pname}*3盒</li>
            </ul>
        </div>
        <div class="desc">
            <p class="desc_item">${v.pdesc}</p>
            <p class="price"><span>￥</span>${v.pprice}</p>
        </div>
    </li>
        `
    })
    $(".product_list .items_list").html(html)
   //给主页商品列表添加购物车按钮增加点击事件
$("li .join a").click(function(){
    $(this).next().css("display","block")
})
//购物车按钮消失时列表隐藏
$(".items_list li").mouseleave(function(){
    $(this).find(".join .details").css("display","none")
})
  
}
//当页面滚动到一定距离，回到顶部按钮出现
window.onscroll=function(){
  if($(window).scrollTop()>300){
      $(".ibar_mp_foot li").eq(2).css("visibility","visible")
      console.log(1)
  }else{
    $(".ibar_mp_foot li").eq(2).css("visibility","hidden")
  }
}
//同步更新购物车数量与内容
updataCart()
async function updataCart(){
    if(localStorage.getItem("uid")){
        $(".fixaside .ibar_mp_carlist .carlist_empty").height(0)
        var {data} = await axios.get(carlistAPI,{
            params:{
                id:localStorage.getItem("uid"),
            }
        })
        console.log(data.data)
        var sum =0;
        var count=0;
        var html=""
        var html0 = `
        <h2>名品特卖</h2>
        <hr>
        `
        data.data.forEach(function(v,i){
           sum = sum+parseInt(v.pnum);
           count = count+parseInt(v.pprice)*parseInt(v.pnum)
           html=html+`
                  <ul class=" cart_list">
                      <li class="clearfix">
                          <div class="l">
                             <img src=${v.pimg} alt="">
                          </div>
                          <div class="r">
                              <p class="name">${v.pname}</p>
                              <p class="desc">${v.pdesc}</p>
                              <p class="mn"><span>￥${v.pprice}</span>×<i>${v.pnum}</i></p>
                          </div>
     
                      </li>
                  </ul>
                  <hr>
           `
        })
        console.log(html)
        var html3 = `
        <p><span class="s1">共<i>${sum}</i>件商品</span><span class="s2">￥${count}</span></p>
        <a href="../html/cart.html" class="to_pay">去购物车结算</a>
        `
        $(".fixaside .ibar_mp_carlist .carlist").html(html0+html+html3)
       $(".fixaside .outer .num").html(sum)
    }else{
$(".fixaside .ibar_mp_carlist .carlist_empty").height(375)
    }
  
}